<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        Ajax：异步(局部)刷新技术。
              不会等上一代码块做完在执行下一代码块。
        原生JS的原始异步实现：    [后续升级为原生JS的axios]
              1、创建异步请求对象
              var req = new XMLHttpRequest()
              2、封装请求
              req.open("get","url",true)
              3、设置回调
              req.onreadystatechange=function(){
                  响应结果
                  if(req.readystate==4 && req.state==200){
                        req.responseText
                  }
              }
              4、发送请求
              req.send()
        JQ的异步实现：
              $.ajax({
                url:'',      //请求路径
                async:true,  //异步请求
                type:"get",  //发送请求类型 get/post/put/delete
                data:"",     //传递到后台的数据 例如：loginName=zhangsan&loginPwd=123
                dataType:"", //后台响应结果的类型 例如：text / json
                error:function(err){}, //执行失败时的处理 
                success:function(data){}   //执行成功时的处理
              });
        
        get/post区别：
          get：
                请求中的数据能被缓存
                编码类型是urlencoded
                参数保留在浏览器历史中
                URL的参数最大长度是2048 个字符，有限制
                数据类型ASCII 字符
                安全性较差，数据会显示
          post：
                请求中的数据不能被缓存
                编码类型是urlencoded/multipart/form-data
                参数不会保留在浏览器历史中
                URL的参数无限制
                数据类型无限制
                安全性较高，不会显示数据
    </pre>

    <div id="result"></div>
    <input type="button" value="异步获取文本" id="btn1" />
    <input type="button" value="异步获取对象信息" id="btn2" />
    <input type="button" value="异步获取对象数组" id="btn3" />

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/chapter4.js"></script>
</body>
</html>